<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>物料组成设计单更改</title>
    <link rel="stylesheet" href="../../css/pintuer.css">
    <link rel="stylesheet" href="../../css/admin.css">
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <style>
        input{
            border-top: none;
            border-left: none;
            border-right: none;
            border-bottom: black solid 1px;
        }
        table{
            border: 1px;
            cell-padding:0;
            cell-spacing:0;
            width: 80%;
            margin-top: 20px;
        }
        table thead{
            background-color:#b3d7ff ;
        }
        a{
            cursor: pointer;
        }
    </style>
</head>
<body>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/bootstrap-table1.15.3.js"></script>
<script>
    var thisUrl=document.URL;
    var getval=thisUrl.split("?")[1];
    var showval=getval.split("=")[1];
    function init(){
        $.ajax({
            url:'/design/selectById',
            data:'id='+showval,
            type:'get',
            success:function (data) {

                $('input[name="id"]').val(data.id);

                $('#designId').text(data.designId);
                $('#productName').text(data.productName);
                $('#productId').text(data.productId);

                $('#costPriceSum').text(data.costPriceSum);

                $('input[name="designer"]').val(data.register);

                var username = localStorage.getItem("userName");
                $('input[name="changer"]').val(username);

                var myDate = new Date;
                var year = myDate.getFullYear();
                var mon = myDate.getMonth() + 1;
                var date = myDate.getDate();
                var h = myDate.getHours();//获取当前小时数(0-23)
                var m = myDate.getMinutes();//获取当前分钟数(0-59)
                var s = myDate.getSeconds();//获取当前秒
                $('#changeTime').text(year+"-"+mon+'-'+date+' '+h+':'+m+':'+s);

            }
        })
        $.ajax({
            url:'/design/selectDetail.action',
            data:'id='+showval,
            type:'post',
            success:function (data) {
                // alert(1);
                var tb = $('#tbodyId');
                tb.empty();
                for( var i = 0 ; i < data.length ; i++ ){

                    var trObj = $('<tr>');

                    var id = $('<td>').text(data[i].id);
                    trObj.append(id);

                    var pid = $('<td>').text(data[i].productId);
                    trObj.append(pid);

                    var pName = $('<td>').text(data[i].productName);
                    trObj.append(pName);


                    var type = $('<td>').text(data[i].type==="Y001-1"?"商品":"物料");
                    trObj.append(type);

                    var count = $('<input class="countClass" type="text" size="3px">');
                    count.val(data[i].amount);
                    var tdAmount = $('<td>');
                    tdAmount.append(count);
                    trObj.append(tdAmount);

                    var amountUnit = $('<td>').text(data[i].amountUnit);
                    trObj.append(amountUnit);

                    var costPrice = $('<td>').text(data[i].costPrice);
                    trObj.append(costPrice);

                    var subtotal = $('<td>').text(data[i].subtotal);
                    trObj.append(subtotal);

                    var de = $('<td>');
                    var del = $('<button type="button"  class="btn btn-sm btn-primary delBtn">').text("删除");
                    de.append(del);
                    trObj.append(de);

                    tb.append(trObj);
                }
            }
        })
    }
    function btnR(){
        $('.returnBtn').click(function () {
            window.location="pro/materiel/selectUpdMateriel.html";
        });
    }
    $(function ()
    {
        btnR();
            $(document).on("click",".delBtn",function () {
                $(this).parent().parent().remove();
            })
    })
    function  addMaterial(id) {
        $.ajax({
            url:'/dFile/selectByPID.action',
            data:'id='+id,
            type:'post',
            success:function (obj) {

                var tb = $('#tbodyId');

                var tr = $('<tr>');

                var td_check = $('<td>').text(obj.ID);
                tr.append(td_check);

                var pid = $('<td>').text(obj.PRODUCT_ID);
                tr.append(pid);

                var pName = $('<td>').text(obj.PRODUCT_NAME);
                tr.append(pName);

                var type = $('<td>').text(obj.TYPE==="Y001-1"?"商品":"物料");
                tr.append(type);

                tr.append($('<td>').html('<input class="countClass" type="text" size="3px">'));

                var amountUnit = $('<td>').text(obj.AMOUNT_UNIT);
                tr.append(amountUnit);

                var costPrice = $('<td>').text(obj.COST_PRICE);
                tr.append(costPrice);

                var sum = $('<td>');

                tr.append(sum);

                tb.append(tr);
            }
        })

    }
    $(function () {
        init();

        $('#sumBtnId').click(function () {
            //判断表格中是否有数据 没有数据不能预览
            var trCount = $('#tbodyId tr').length;
            if(trCount<=0){
                alert('至少要有一条数据');
            }else {
                var arr = $('#tbodyId tr');
                // alert(arr.eq(0).children().eq(4));
                var sum=0;
                var sumMoney=0;
                for(var i=0;i<arr.length;i++){
                    //小计（元）
                    let  count  = parseInt($('.countClass').eq(i).val());
                    if(!isNaN(count)){
                        if(count==null || count == ''){
                            alert('数量不能为空');
                        }else if(count === 0){
                            alert('数量为0');
                        }else if(count<0){
                            alert('不小于0')
                        }else{
                            let  price =parseInt(arr.eq(i).children().eq(6).text());
                            arr.eq(i).children().eq(7).text(count*price);
                            //计算总件数
                            sum+=count;
                            //总金额
                            sumMoney+=count*price;
                            $('#submitDivId').show();
                            $('#btnDivId').hide();
                        }
                    }else{
                        alert('您输入了，不符合的字符，该空只能填写数字字符');
                        sum=0;
                        sumMoney=0;
                        return;
                    }

                    if(sum!==0){
                        //总件数
                        $('#amountSum').val(sum);
                    }
                    if(sumMoney!==0){
                        $('#costPriceSum').val(sumMoney);
                    }
                }
            }
        });
        $('#addMateriel').click(function () {
            initMaterial();
        });
        $('#submitBtnId').click(function () {
            submitBtnId();
        });
    })
    //查询物料
    function initMaterial(){
        $.ajax({
            url:'/dFile/materielSelect.action',
            data:'type=Y001-2',
            type:'get',
            success:function (data) {
                var tb =  $('#tbody');
                tb.empty();
                for(var i=0 ;i<data.length; i++){

                    var tr = $('<tr>');

                    var pid = $('<td>').text(data[i].PRODUCT_ID);
                    tr.append(pid);

                    var pName = $('<td>').text(data[i].PRODUCT_NAME);
                    tr.append(pName);

                    var type = $('<td>').text(data[i].TYPE==="Y001-1"?"商品":"物料");
                    tr.append(type);

                    var amountUnit = $('<td>').text(data[i].AMOUNT_UNIT);
                    tr.append(amountUnit);

                    var costPrice = $('<td>').text(data[i].COST_PRICE);
                    tr.append(costPrice);

                    var td = $('<td>');
                    var add = $('<button class="btn btn-sm btn-primary" type="button" onclick="addMaterial('+data[i].PRODUCT_ID+');">').text("添加");
                    td.append(add);
                    tr.append(td);

                    tb.append(tr);
                }
            }
        })
    }
    function submitBtnId() {

        var module = new Object();
        module.id = $('input[name="id"]').val();
        module.designId = $('#designId').text();
        module.productName = $('#productName').text();
        module.productId = $('#productId').text();
        module.costPriceSum = $('#costPriceSum').text();
        module.designer = $('input[name="designer"]').val();
        module.checker =$('input[name="changer"]').val();
        module.checkTime = $('#changeTime').text();


        //创建一个对象数组
        var arr=[];
        //拿取表格中的值，放到SGatherDetails类中
        for(var i=0;i<$('#tbodyId tr').length;i++){
            //获取每一行的对象tr
            let trObj = $('#tbodyId tr').get(i);
            //new 一个对象
            var details = new Object();
            //获取值
            details.id = trObj.children[0].innerText;
            details.productId = trObj.children[1].innerText;
            details.productName = trObj.children[2].innerText;
            if (trObj.children[3].innerText==="物料"){
                details.type = "Y001-2";
            }else{
                details.type = "Y001-1";
            }
            details.amount = $('.countClass').eq(i).val();
            details.amountUnit = trObj.children[5].innerText;
            details.costPrice = trObj.children[6].innerText;
            details.subtotal = trObj.children[7].innerText;
            details.desidualAmount = details.amount;
            //存到对象数组中
            arr.push(details);
        }

        $.ajax({
            type:'post',
            url:'/design/updMateriel.action',
            data:'design='+JSON.stringify(module)+'&details='+JSON.stringify(arr),
            success:function (data) {
                if (data>0){
                    alert("更改物料设计单成功！");
                    window.location="selectMateriel.html";
                }
            }
        });
    }
</script>
<div class="container-fluid">
    <div class="row" style="margin-top: 50px;">
        <div class="col-12">
            <div style="width: 60%;margin: 0 auto;">
                    <div class="col-6 offset-6" style="text-align: right" id="btnDivId">
                        <button class="btn btn-primary btn-sm" id="addMateriel" data-toggle='modal' data-target='#materielModal'>添加物料</button>
                        <button class="btn btn-success btn-sm" id="sumBtnId">预览</button>
                        <button class="btn btn-primary btn-sm returnBtn">返回</button>
                    </div>
                    <div id="submitDivId" class="col-6 offset-6" style="text-align: right;display: none;">
                        <button class="btn btn-success btn-sm" id="submitBtnId">确认更改</button>
                        <button class="btn btn-primary btn-sm returnBtn">返回</button>
                    </div>
            </div>
        </div>
        <div class="col-12">
            <div style="width: 60%;height: 550px;border: 2px solid gray;margin: 0 auto;margin-top: 10px">
                <h3 align="center" style="margin-top: 30px">物料组成设计单</h3>
                <div class="container-fluid">
                    <form id="MaterialFormId">
                        <input type="hidden" name="id">
                        <div class="row">
                            <div class="col-2">
                                设计单编号：
                            </div>
                            <div class="col-4" style="padding-left: 0px;margin-left: 0px;">
                                <span id="designId"></span>
                            </div>
                            <div class="col-2">
                                设计人：
                            </div>
                            <div class="col-4">
                                <input name="designer" id="designer">
                            </div>
                        </div>

                        <div class="row" style="margin-top: 30px;">
                            <div class="col-2">
                                产品名称：
                            </div>
                            <div class="col-4" style="padding-left: 0px;margin-left: 0px;">
                                <span id="productName"></span>
                            </div>
                            <div class="col-2">
                                产品编号：
                            </div>
                            <div class="col-4" style="padding-left: 0px;margin-left: 0px;">
                                <span id="productId"></span>
                            </div>
                        </div>

                        <div>
                            <table width="80%" style="margin-top: 20px;text-align: center;" class="table table-sm">
                                <thead  style="background-color: #b3d7ff;">
                                <tr>
                                    <th>序号</th>
                                    <th>物料编号</th>
                                    <th>物料名称</th>
                                    <th>用途类型</th>
                                    <th>数量</th>
                                    <th>单位</th>
                                    <th>计划成本单价（元）</th>
                                    <th>小计（元）</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody id="tbodyId" align="center">

                                </tbody>
                            </table>
                        </div>

                        <div class="row" style="margin-top: 20px;">
                            <div class="col-2">
                                物料总成本：
                            </div>
                            <div class="col-2">
                                <span id="costPriceSum"></span>
                            </div>

                        </div>

                        <div class="row" style="margin-top: 30px;">
                            <div class="col-2">
                               变更人：
                            </div>
                            <div class="col-4">
                                <input  name="changer" id="changer">
                            </div>
                            <div class="col-2">
                                变更时间：
                            </div>
                            <div class="col-4">
                                <span id="changeTime"></span>
                            </div>
                        </div>

                        <div style="margin-top: 30px;">
                            <span>设计要求：</span>
                            <textarea cols="70%" rows="3" name="moduleDescribe" id="remark"></textarea>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal  fade" id="materielModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 90%">
        <div class="modal-content" style="border: 1px solid black;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="margin-right: 0px"></button>
            </div>
            <div class="modal-body">
                <table style="text-align: center;" id="materialTableInfo" width="60%" class="table table-sm thead-light">
                    <thead>
                    <tr>
                        <th>物料编号</th>
                        <th>物料名称</th>
                        <th>用途类型</th>
                        <th>单位</th>
                        <th>计划成本单价（元）</th>
                        <th>添加</th>
                    </tr>
                    </thead>
                    <tbody id="tbody">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

</body>
</html>